/*
 * @Description: 自定义参数弹框入口文件
 * @Author: gn
 * @Date: 2023-12-12 09:49:36
 * @LastEditors: gn
 * @LastEditTime: 2023-12-14 11:20:22
 */

import React, { useRef, useState } from 'react';
import { PlusCircleOutlined } from '@ant-design/icons';
import { Typography } from 'antd';
import DmContext from './component/dmContext';
import ModalEle from './component/modalEle';
import TableEle from './component/tableEle';
import { deepCopy } from '@/routes/Dm/customParamers/utils';

import PubSub from 'pubsub-js';
import { custom_params } from '@/__mocks__/data';
const { Title } = Typography;

const CustomParamers = props => {
  const modalEleRef = useRef(null);

  // 获取的自定义参数数组
  const columns_data = custom_params.customList;
  const [useColumnsObj, setUseColumnsObj] = useState({});
  const [useColumnsArr, setUseColumnsArr] = useState([]);

  const showModal = () => {
    modalEleRef.current.openModal && modalEleRef.current.openModal();
  };

  /**
   * @description: 自定义参数赋值
   * @param {*} value
   * @param {*} index
   * @return {*}
   * @author: gn
   */
  const setParamsValue = (obj, value, index) => {
    const useObj = deepCopy(useColumnsObj);
    if (!value) {
      delete useObj[obj.enname];
    } else {
      obj.paramValue = value;
      useObj[obj.enname] = obj;
    }
    setUseColumnsObj(useObj);
  };

  const addCustomParams = () => {
    const customParams = Object.values(useColumnsObj);
    setUseColumnsArr(customParams);

    console.log(
      '%c [ customParams,useColumnsObj ]-54',
      'font-size:13px; background:pink; color:#bf2c9f;',
      customParams,
      useColumnsObj
    );
  };

  const Providers = {
    columns_data,
    setParamsValue,
  };

  PubSub.publish('renderData', {
    columns_data,
    setParamsValue,
  });

  return (
    <>
      {/* 弹窗模块 */}
      <DmContext.Provider value={Providers}>
        <PlusCircleOutlined onClick={showModal} />
        <ModalEle ref={modalEleRef} onClick={addCustomParams} />
      </DmContext.Provider>

      {/* 组合渲染模块 */}
      <Title level={3}>节点参数</Title>
      <TableEle key="pointParams" datasource="props" usedata={custom_params.actList} />

      {/* 自定义参数 */}
      <Title level={3}>自定义参数</Title>
      <TableEle
        key="customParams"
        datasource="props"
        options={true}
        usedata={useColumnsArr}
        // selectData={useColumnsArr}
      />
    </>
  );
};

export default CustomParamers;
